/* HelpLess
*
*  @What is it:
*  HelpLess is a Helper Library for the brilliant LESS dynamic stylesheet language.
*  Read more about LESS: http://lesscss.org/
*
*  @thanks:
*  Eric Meyer for his html reset - http://meyerweb.com/eric/tools/css/reset/
*  Necolas for his normalize - https://github.com/necolas/normalize.css
*
*  @How to use:
*  Import helpless.x.x.x.less into your main style.less file.
*
*  @Author:
*  m6tt: m6tt.com
*
*  @Bug fix
*  Steven Yang: steven.yang@ele.me
*
*
*  @Reference:
*  ------------------------------------------------------------------------------
*    BASICS                     =>    syntax
*  ------------------------------------------------------------------------------
*    - .reset                   =>    #hl.reset() - call outside of element
*    - .normalize               =>    #hl.normalize - call outside of element
*    - .clearfix                =>    #hl.clearfix()
*    - .centered                =>    #hl.centered(width)
*    - .border                  =>    #hl.border(color)
*    - .opacity                 =>    #hl.opacity(value)
*    - .round-all-corners       =>    #hl.round-all-corners(radius)
*    - .rounded-corners         =>    #hl.rounded-corners(topLeft, topRight, bottomRight, bottomLeft)
*    - .transition              =>    #hl.transition(property, duration, ease, delay)
*    - .drop-shadow             =>    #hl.drop-shadow(x, y, blur, color)
*    - .inner-shadow            =>    #hl.inner-shadow(x, y, blur, color)
*    - .text-shadow             =>    #hl.text-shadow(x, y, blur, color)
*    - .background-gradient     =>    #hl.background-gradient(colorFrom, colorTo, fallbackColor, fallbackImageUrl)
*    - .scale                   =>    #hl.scale(amount)
*    - .scaleX                  =>    #hl.scaleX(amount)
*    - .scaleY                  =>    #hl.scaleY(amount)
*    - .rotate                  =>    #hl.rotate(degrees)
*    - .rotateX                 =>    #hl.rotateX(degrees)
*    - .rotateY                 =>    #hl.rotateY(degrees)
*    - .skew                    =>    #hl.skew(angleX, angleY)
*    - .skewX                   =>    #hl.skewX(angleX)
*    - .skewY                   =>    #hl.skewY(angleY)
*    - .translate               =>    #hl.translate(x, y)
*    - .translateX              =>    #hl.translateX(x)
*    - .translateY              =>    #hl.translateY(y)
*    - .matrix                  =>    #hl.matrix(n, n, n, n, n, n)
*
*  ------------------------------------------------------------------------------
*    GRID                       =>    syntax
*  ------------------------------------------------------------------------------
*    - .grid                    =>    namespace, do not call directly, use .make or one of the predefined grid makers
*     - .make                   =>    #hl.grid.make(width, colNumber, gutterWidth)
*     - .1200                   =>    #hl.grid.1200();
*     - .1120                   =>    #hl.grid.1120();
*     - .1040                   =>    #hl.grid.1040();
*     - .960                    =>    #hl.grid.960();
*     - .880                    =>    #hl.grid.880();
*     - .800                    =>    #hl.grid.800();
*     - .720                    =>    #hl.grid.720();
*     - .640                    =>    #hl.grid.640();
*     - .560                    =>    #hl.grid.560();
*     - .480                    =>    #hl.grid.480();
*     - .400                    =>    #hl.grid.400();
*     - .320                    =>    #hl.grid.320();
*     - .240                    =>    #hl.grid.240();
*     - .row                    =>    #hl.grid.row();
*     - .col                    =>    #hl.grid.col(colSpan);
*
*  ---------------------------------------
*    TYPOGRAPHY
*  ---------------------------------------
*    - .typo                    =>    namespace, do not call directly
*     - .serif                  =>    #hl.typo.serif(webfont-name-optional);
*     - .sans                   =>    #hl.typo.sans(webfont-name-optional);
*     - .columns                =>    #hl.typo.columns(count, gap)
*
*  ---------------------------------------
*    IMAGES
*  ---------------------------------------
*    - .img                     =>    namespace, do not call directly
*     - .responsive             =>    #hl.img.responsive();
*     - .framed                 =>    #hl.img.framed();

*  ---------------------------------------
*    USER INTERFACE
*  ---------------------------------------
*    - .ui                      =>    namespace, do not call directly
*     - .themes                 =>    namespace, do not call directly
*      - .light                 =>    #hl.ui.themes.light(); - call within <body> element
*      - .dark                  =>    #hl.ui.themes.dark(); - call within <body> element
*     - .list                   =>    namespace, do not call directly
*      - .subtle                =>    #hl.list.subtle(); - call within <ul> element
*      - .horizontal            =>    #hl.list.horizontal(); - call within <ul> element
*
*/
#hl {
  /************************************
  * Meyer Reset
  * http://meyerweb.com/eric/tools/css/reset/
  ************************************/

  /************************************
  * Normalize by necolas
  * https://github.com/necolas/normalize.css
  ************************************/

  /************************************
  * Clearfix
  *
  * what?: Contains floats, for more info see h5bp.com/q.
  *        Removes the need to add .clearfix as a class
  *        to your elements.
  *
  ************************************/

  /************************************
  * Centered
  *
  * @what?: Center your object with an
  *         automatic margin
  *
  * @params: width,      default = 960px
  *
  ************************************/

  /************************************
  * Border
  *
  * @what?: Add a 1px solid border
  *        super quick.
  *
  * @params: colour,      default = #000
  *
  ************************************/

  /************************************
  * Opacity
  *
  * @what?: Add opacity to an HTML element that works
  *         in all browsers including ie6+
  *
  * @params: value,      default = .5
  *
  ************************************/

  /************************************
  * Round all corners
  *
  * @what?: Rounds every corner equally
  *
  * @params: radius,      default = 5px
  *
  ************************************/

  /************************************
  * Rounded corners
  *
  * @what?: Round each corner individually
  *
  * @params: topLeft,     default = 5px
  *          topRight,    default = 5px
  *          bottomRight, default = 5px
  *          bottomLeft,  default = 5px
  *
  ************************************/

  /************************************
  * Transition
  *
  * @what?: Defines a CSS3 transition
  *
  * @params: property,    default = all
  *          duration,    default = .5s
  *          ease,        default = linear
  *          delay,       default = .0s
  *
  ************************************/

  /************************************
  * Drop shadow
  *
  * @what?: Adds an outer shadow to the
  *         html element. To add a shadow
  *         to text use #hl.text-shadow(...)
  *
  * @params: x,           default = 0px
  *          y,           default = 1px
  *          blur,        default = 1px
  *          colour,      default = rgba(0, 0, 0, .6)
  *
  ************************************/

  /************************************
  * Inner shadow
  *
  * @what: Adds an inner shadow to the
  *        html element.
  *
  * @params: x,           default = 0px
  *          y,           default = 1px
  *          blur,        default = 1px
  *          colour,      default = rgba(0, 0, 0, .6)
  *
  ************************************/

  /************************************
  * Text shadow
  *
  * @what?: Adds an outer shadow to text
  *
  * @params: x,           default = 1px
  *          y,           default = 1px
  *          blur,        default = 1px
  *          colour,      default = rgba(0, 0, 0, .6)
  *
  ************************************/

  /************************************
  * Background Gradient
  *
  * @what?: Adds a background gradient to
  *         an HTML element
  *
  * @params: colourFrom,       default = #bbb
  *          colourTo,         default = #f1f1f1
  *          fallbackColour,   default = #f1f1f1
  *          fallbackImageUrl, default = ''
  *
  ************************************/

  /************************************
  * Scale
  *
  * @what?: Defines a 2D scale transformation
  *
  * @params: amount,      default = 1
  *
  ************************************/

  /************************************
  * ScaleX
  *
  * @what?: Defines a scale transformation
  *         by giving a value for the X-axis
  *
  * @params: x,           default = 1
  *
  ************************************/

  /************************************
  * ScaleY
  *
  * @what?: Defines a scale transformation
  *         by giving a value for the Y-axis
  *
  * @params: y,           default = 1
  *
  ************************************/

  /************************************
  * Rotate
  *
  * @what?: Defines a 2D rotation, the angle
  *         is specified in the parameter
  *
  * @params: degrees,     default = 90deg
  *
  ************************************/

  /************************************
  * RotateX
  *
  * @what?: Defines a 3D rotation along the X-axis
  *
  * @params: degrees,     default = 90deg
  *
  ************************************/

  /************************************
  * RotateY
  *
  * @what?: Defines a 3D rotation along the Y-axis
  *
  * @params: degrees,     default = 90deg
  *
  ************************************/

  /************************************
  * Skew
  *
  * @what?: Defines a 2D skew transformation
  *         along the X- and the Y-axis
  *
  * @params: angleX,      default = 10deg
  *          angleY,      default = 10deg
  *
  ************************************/

  /************************************
  * SkewX
  *
  * @what?: Defines a 2D skew transformation
  *         along the X-axis
  *
  * @params: angleX,      default = 10deg
  *
  ************************************/

  /************************************
  * SkewY
  *
  * @what?: Defines a 2D skew transformation
  *         along the Y-axis
  *
  * @params: angleY,      default = 10deg
  *
  ************************************/

  /************************************
  * Translate
  *
  * @what?: Defines a 2D translation
  *
  * @params: x,           default = 10px
  *          y,           default = 10px
  *
  ************************************/

  /************************************
  * TranslateX
  *
  * @what?: Defines a translation, using
  *         only the value for the X-axis
  *
  * @params: x,           default = 10px
  *
  ************************************/

  /************************************
  * TranslateY
  *
  * @what?: Defines a translation, using
  *         only the value for the Y-axis
  *
  * @params: y,           default = 10px
  *
  ************************************/

  /************************************
  * Matrix
  *
  * @what?: Defines a 2D transformation,
  *         using a matrix of six values
  *
  * @params: n1,          default = 0
  *          n2,          default = 0
  *          n3,          default = 0
  *          n4,          default = 0
  *          n5,          default = 0
  *          n6,          default = 0
  *
  ************************************/

  /************************************
  * Grid
  ************************************/

  /***********************************
  * TYPOGRAPHY
  ***********************************/

  /***********************************
  * IMAGE
  ***********************************/

  /***********************************
  * UI
  ***********************************/

}
#hl .grid {
  /************************************
    * Make
    *
    * @what?: Defines the base variables needed
    *         for the HelpLess grid system.
    *
    * @params: @width,      default = 960
    *          @colnum,     default = 16
    *          @colgutter,  default = 10
    *
    ************************************/

  /************************************
    * 1200
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 1120
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 1040
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 960
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 880
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 800
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 720
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 640
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 560
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 480
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 400
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 320
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * 240
    *
    * @what?: Predefined grid maker
    *
    ************************************/

  /************************************
    * Row
    *
    * @what?: Defines an element as a row.
    *         clears all clearfixes all columns
    *         directly inside.
    *
    ************************************/

  /************************************
    * Col
    *
    * @what?: Defines an element as a column.
    *         Sets the width depending on the
    *         supplied arguments and the width
    *         set in .grid()
    *
    * @params: @colSpan,  default = 1
    *
    ************************************/

}
#hl .typo {
  /************************************
    * Serif
    *
    * @what?: Quickly set your font family
    *         as a serif set
    *
    * @params: @webfont,  default = none
    *
    ************************************/

  /************************************
    * Serif
    *
    * @what?: Quickly set your font family
    *
    * @params: @webfont,  default = none
    *
    ************************************/

  /************************************
    * Columns
    *
    * @what?: Sets CSS3 columns within
    *         block of html text
    *
    * @params: count,       default = 1
    *          gap,         default = 10px
    *
    ************************************/

}
#hl .img {
  /************************************
    * Responsive
    *
    * @what?: Set image max-width: 100%
    *
    ************************************/

  /************************************
    * Framed
    *
    * @what?: Add a quick 10px frame to your image
    *
    ************************************/

}
#hl .ui {
  /***********************************
     * PREDEFINED THEMES
     ***********************************/

  /***********************************
     * LISTS
     ***********************************/

  /***********************************
     * FORMS
     ***********************************/

}
#hl .ui .themes {
  /***********************************
       * Theme: Light
       *
       * @what?: Quickly style the base elements
       *         of your page
       *
       ***********************************/

  /***********************************
       * Theme: Dark
       *
       * @what?: Quickly style the base elements
       *         of your page
       *
       ***********************************/

}
#hl .ui .list {
  /***********************************
       * Subtle
       *
       * @what?: Quickly removes the styling
       *         from a list
       *
       ***********************************/

  /***********************************
       * Horizontal
       *
       * @what?: Creates a horizontal list,
       *         useful for styling your site nav
       *
       ***********************************/

}
/* Set Z-Index Layor for each layer */
.full-content-wrapper {
  position: relative;
  z-index: 11;
}
/* not works.
html,body {
  background-color: none;
}
*/
/* Set Background Canvas Position*/
#background {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0%;
  z-index: 6;
  background-color: #151f40;
  background-image: url("backgrou.jpg");
  background-repeat: repeat-x;
}
/* =====  CLOUDS  ===== */
#clouds {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 20;
}
#clouds .cloudPiece {
  position: absolute;
}
#clouds #cloudPiece1 {
  top: 220px;
  left: -10px;
  clip: rect(0 296px 190px 0);
}
#clouds #cloudPiece2 {
  top: 450px;
  left: -290px;
  clip: rect(0 515px 144px 300px);
}
#clouds #cloudPiece3 {
  top: 600px;
  right: -300px;
  clip: rect(0 810px 222px 515px);
}
#clouds #cloudPiece4 {
  top: 460px;
  right: 15px;
  clip: rect(0 1085px 144px 810px);
}
#clouds #cloudPiece5 {
  top: 420px;
  left: -370px;
  clip: rect(222px 665px 430px 382px);
}
#clouds #cloudPiece6 {
  top: 50px;
  left: 620px;
  clip: rect(222px 870px 360px 672px);
}
#clouds #cloudPiece7 {
  top: -120px;
  left: -110px;
  clip: rect(195px 385px 415px 0);
}
#clouds #cloudPiece8 {
  top: 70px;
  left: 520px;
  clip: rect(222px 1078px 360px 878px);
}
/* =====  Stars  ===== */
#bg_stars {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 21;
  display: none;
}
#bg_stars div.star_type_1_big div.bg_star {
  position: absolute;
  z-index: 22;
  width: 26px;
  height: 32px;
  background-image: url("stars1-1.png");
  background-position: 0 0;
}
#bg_stars div.star_type_1_big #star1_1 {
  left: 50px;
  top: 650px;
}
#bg_stars div.star_type_1_big #star1_2 {
  left: 100px;
  top: 300px;
}
#bg_stars div.star_type_1_big #star1_3 {
  left: 200px;
  top: 450px;
}
#bg_stars div.star_type_1_big #star1_4 {
  right: 50px;
  top: 350px;
}
#bg_stars div.star_type_1_big #star1_5 {
  right: 150px;
  top: 150px;
}
#bg_stars div.star_type_1_big #star1_6 {
  right: 100px;
  top: 750px;
}
#bg_stars div.star_type_1_normal div.bg_star {
  position: absolute;
  z-index: 22;
  width: 18px;
  height: 22px;
  background-image: url("stars1-2.png");
  background-position: 0 0;
}
#bg_stars div.star_type_1_normal #star1_7 {
  left: 30px;
  top: 900px;
}
#bg_stars div.star_type_1_normal #star1_8 {
  left: 90px;
  top: 750px;
}
#bg_stars div.star_type_1_normal #star1_9 {
  left: 130px;
  top: 150px;
}
#bg_stars div.star_type_1_normal #star1_10 {
  right: 170px;
  top: 620px;
}
#bg_stars div.star_type_1_normal #star1_11 {
  right: 30px;
  top: 250px;
}
#bg_stars div.star_type_1_normal #star1_12 {
  right: 200px;
  top: 470px;
}
#bg_stars div.star_type_1_small div.bg_star {
  position: absolute;
  z-index: 22;
  width: 10px;
  height: 12px;
  background-image: url("stars1-3.png");
  background-position: 0 0;
}
#bg_stars div.star_type_1_small #star1_13 {
  left: 80px;
  top: 800px;
}
#bg_stars div.star_type_1_small #star1_14 {
  left: 180px;
  top: 350px;
}
#bg_stars div.star_type_1_small #star1_15 {
  left: 220px;
  top: 50px;
}
#bg_stars div.star_type_1_small #star1_16 {
  right: 160px;
  top: 670px;
}
#bg_stars div.star_type_1_small #star1_17 {
  right: 90px;
  top: 150px;
}
#bg_stars div.star_type_1_small #star1_18 {
  right: 140px;
  top: 330px;
}
#bg_stars div.star_type_2_big div.bg_star {
  position: absolute;
  z-index: 22;
  width: 34px;
  height: 32px;
  background-image: url("stars2-1.png");
  background-position: 0 0;
}
#bg_stars div.star_type_2_big #star2_1 {
  left: 150px;
  top: 450px;
}
#bg_stars div.star_type_2_big #star2_2 {
  left: 230px;
  top: 220px;
}
#bg_stars div.star_type_2_big #star2_3 {
  left: 80px;
  top: 410px;
}
#bg_stars div.star_type_2_big #star2_4 {
  right: 250px;
  top: 750px;
}
#bg_stars div.star_type_2_big #star2_5 {
  right: 190px;
  top: 410px;
}
#bg_stars div.star_type_2_big #star2_6 {
  right: 70px;
  top: 280px;
}
#bg_stars div.star_type_2_normal div.bg_star {
  position: absolute;
  z-index: 22;
  width: 23px;
  height: 23px;
  background-image: url("stars2-2.png");
  background-position: 0 0;
}
#bg_stars div.star_type_2_normal #star2_7 {
  left: 30px;
  top: 830px;
}
#bg_stars div.star_type_2_normal #star2_8 {
  left: 190px;
  top: 350px;
}
#bg_stars div.star_type_2_normal #star2_9 {
  left: 230px;
  top: 550px;
}
#bg_stars div.star_type_2_normal #star2_10 {
  right: 170px;
  top: 920px;
}
#bg_stars div.star_type_2_normal #star2_11 {
  right: 90px;
  top: 450px;
}
#bg_stars div.star_type_2_normal #star2_12 {
  right: 270px;
  top: 370px;
}
#bg_stars div.star_type_2_small div.bg_star {
  position: absolute;
  z-index: 22;
  width: 14px;
  height: 13px;
  background-image: url("stars2-3.png");
  background-position: 0 0;
}
#bg_stars div.star_type_2_small #star2_13 {
  left: 30px;
  top: 740px;
}
#bg_stars div.star_type_2_small #star2_14 {
  left: 60px;
  top: 250px;
}
#bg_stars div.star_type_2_small #star2_15 {
  left: 100px;
  top: 80px;
}
#bg_stars div.star_type_2_small #star2_16 {
  right: 230px;
  top: 370px;
}
#bg_stars div.star_type_2_small #star2_17 {
  right: 160px;
  top: 190px;
}
#bg_stars div.star_type_2_small #star2_18 {
  right: 300px;
  top: 270px;
}
#sun {
  width: 445px;
  height: 356px;
  position: absolute;
  left: 0px;
  background: transparent url("clouds00.png") no-repeat -660px -350px;
}
#moon {
  width: 274px;
  height: 251px;
  position: absolute;
  right: 0px;
  background: transparent url("clouds00.png") no-repeat -395px -430px;
}
.night div#where ul li.current_entry a,
.night #page_footer span a,
.night #where ul li,
.night #where ul li a,
.night .order_flow ol li,
.night .order_nav ul li a,
.night .order_nav li,
.night body footer nav ul li a,
.night body footer nav ul li a:visited {
  color: #d1d1d1;
}
.day #sun,
.night #moon,
.night #bg_stars {
  display: block;
}
.night #sun,
.day #moon,
.day #bg_stars {
  display: none;
}
.night #header_bg {
  box-shadow: 0 0 5px #333;
  -webkit-box-shadow: 0 0 5px #333333;
  -moz-box-shadow: 0 0 5px #333333;
  box-shadow: 0 0 5px #333333;
  -ms-filter: progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=125,strength=2);
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=125,strength=2);
  background-color: #2d2d2d;
  background-image: fallbackImageUrl;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111111), to(#333333));
  background-image: -webkit-linear-gradient(bottom, #111111, #333333);
  background-image: -moz-linear-gradient(bottom, #111111, #333333);
  background-image: -ms-linear-gradient(bottom, #111111, #333333);
  background-image: -o-linear-gradient(bottom, #111111, #333333);
  /* For Internet Explorer 5.5 - 7 */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#111111');
  /* For Internet Explorer 8 and newer */

  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#111111');
}
.day #background {
  color: #c0deed;
}
.night .breadcrumb a {
  color: #fff;
}
.night .breadcrumb li,
.night .breadcrumb .divider {
  color: #fff;
}
.night .navbar-inner,
.night .navbar .fill {
  box-shadow: 0 0;
  /*box-shadow: 0 0 5px #333;*/

  /*-webkit-box-shadow: 0 0 5px #333333;*/

  /*-moz-box-shadow: 0 0 5px #333333;*/

  /*box-shadow: 0 0 5px #333333;*/

  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=125,strength=2)";
  filter: "progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=125,strength=2)";
}
.night .footer .links a,
.night .footer .copyright a {
  color: #ffffff;
}
.night .cart-container .cart-header .cart-nav ul li {
  color: #fff;
}
.night .cart-container .cart-header .cart-nav ul li a {
  color: #fff;
}
.night .cart-container ul.flow li {
  color: #fff;
}
.night .cart-container ul.flow li.current {
  color: #f60;
}